<template>
  <l-data-panel :label="data.label">
    <l-echarts ref="main" :option="option"></l-echarts>
  </l-data-panel>
</template>
<script>
export default {
  props: ["data", "isPreview", "isShow"],
  data() {
    return {
      option: {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            detail: {
              formatter: "{value}",
            },
            data: [
              {
                value: 50,
                name: "SCORE",
              },
            ],
          },
        ],
      },
    };
  },

  computed: {
    height() {
      return this.data.h;
    },
    width() {
      return this.data.w;
    },
  },
  watch: {
    isShow() {
      setTimeout(() => {
        this.$refs.main.updateChart();
      }, 100);
    },
    height() {
      this.$refs.main.updateChart();
    },
    width() {
      this.$refs.main.updateChart();
    },
  },

  mounted() {
    //this.$refs.main.update( )
  },
  methods: {},
};
</script>
